.user-container {
  padding-bottom: calc(40rpx + 88rpx + env(safe-area-inset-bottom));
  min-height: 100vh;

  .user-card {
    padding: 40rpx 0 100rpx;

    .userInfor {
      display: flex;

      .img {
        margin: 0 20rpx 0 40rpx;
        width: 120rpx;
        height: 120rpx;
        background-color: #fff;
        border-radius: 50%;
        border: 2rpx solid #f8f0df;

        image {
          width: 100%;
          height: 100%;
          border-radius: 120rpx;
        }
      }

      .zoneIntroduction {
        flex: 1;
        // display: flex;
        // flex-direction: column;

        .username {
          font-size: 36rpx;
          font-weight: bold;
          width: 300rpx;
          // color: #f8f0df;
          white-space: nowrap;
          /*内容超宽后禁止换行显示*/
          overflow: hidden;
          /*超出部分隐藏*/
          text-overflow: ellipsis;
          /*文字超出部分以省略号显示*/
        }

        .label {
          display: inline-block;
          margin-top: 8rpx;
          padding: 0 10rpx;
          // width: 160rpx;
          // color: #a5646d;
          font-size: 24rpx;
          text-align: center;
          // background-color: #f8f0df;
          border-radius: 10rpx;
        }

        .zoneMsg {
          margin: 16rpx 0 0 0;
          padding-right: 20rpx;
          // color: #f8f0df;
          font-size: 28rpx;
          word-break: break-all;
        }
      }
    }
  }

  .user-data {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    font-size: 28rpx;
    padding: 20rpx 0;
    margin-bottom: 20rpx;
    border-radius: 20rpx;


    .user-data-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      // color: #f8f0df;
    }
  }

  .heartbeat-value {
    padding: 10rpx 30rpx 25rpx 30rpx;
    margin-bottom: 20rpx;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    border-radius: 20rpx;

    .left {
      font-size: 26rpx;
    }

    .right {
      display: flex;
      align-items: center;
      justify-content: center;

      .img-container {
        margin-right: 10rpx;
        width: 50rpx;
        height: 50rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .value {
        font-size: 34rpx;
      }
    }
  }

  .tool-bar {
    // position: relative;
    // margin: -110rpx 16rpx 0;
    height: auto;
    border-radius: 26rpx;

    .action-card {
      // display: grid;
      // grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      // padding: 20rpx 0;
      // overflow: hidden;

      .tool-list {
        // width: 100rpx;
        // flex: 20%;
        display: flex;
        // flex-direction: column;
        align-items: center;
        // justify-content: center;
        margin-bottom: 20rpx;
        height: 80rpx;
        // color: #f8f0df;
        // border: none;
        border-radius: 80rpx;
        border-left: 0;
        overflow: hidden;
        animation: addWidth 1s forwards ease-out;

        .item-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 80rpx;
          height: 80rpx;
          // background-color: #a5646d;
          border-radius: 80rpx;
        }

        .item-title {
          padding: 0 20rpx 0 20rpx;
          flex: 1;
          display: flex;
          justify-content: space-between;
          animation: showList 3s ease-out forwards;

          .left {
            display: flex;
            align-items: center;
            font-size: 28rpx;
          }

          .van-icon {
            font-size: 34rpx;
          }
        }

        .van-icon {
          font-size: 50rpx;
        }
      }
    }
  }

  // 评分
  .score {
    // margin: 26rpx 16rpx 0;
    padding: 16rpx 16rpx 26rpx;
    display: flex;
    flex-direction: column;
    // background-color: #f8f0df;
    border-radius: 26rpx;
    // border: 2rpx solid #a5646d;

    span {
      // padding: 0 40rpx;
      font-size: 28rpx;
      // color: #a5646d;
    }

    .van-rate {
      margin-top: 20rpx;
      display: flex;
      justify-content: center;
    }
  }

  // 分享弹窗
  van-overlay {
    z-index: 99999;

    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .block {
      width: 400rpx;
      // height: 400rpx;
      border-radius: 20rpx;
    }

    .poster {
      width: 100%;
      height: 100%;
    }
  }

  .bg-img {
    z-index: -1;
  }
}

@keyframes addWidth {
  0% {
    width: 70rpx;
  }

  100% {
    width: 100%;
  }
}

@keyframes showList {
  0% {
    display: none;
  }

  40% {
    display: none;
  }

  100% {
    display: flex;
  }
}